<template>
  <div class="f-tag-list" :style="{ left: $store.state.asideWidth}">
    <el-tabs
      v-model="activeTab"
      type="card"
      class="flex-1"
      closable
      style="min-width: 100px;"
      @tab-change="changeTab"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
      >

      </el-tab-pane>
    </el-tabs>

    <span class="tag-btn">
      <el-dropdown @command="handleClose">
        <span class="el-dropdown-link">
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
            <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
  <div style="height: 44px;"></div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute,onBeforeRouteUpdate,useRouter } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies';
import { useStore } from 'vuex';

const store = useStore()

const cookie = useCookies()
const route = useRoute()
const router = useRouter()

const activeTab = ref(route.path)
const tabList = ref([])

function addTab(tab){
    let noTab = tabList.value.findIndex(t => t.path == tab.path) == -1
    if(noTab && tab.path != "/"){
        tabList.value.push(tab)
    }

    cookie.set("tabList",tabList.value)
}

function initTabList(){
    let tabs = cookie.get("tabList")
    if(tabs){
        tabList.value = tabs
    }
}

initTabList()

onBeforeRouteUpdate((to,from) => {
    activeTab.value = to.path
    addTab({
        title:to.meta.title,
        path:to.path
    })
})

const changeTab = (t) => {
    activeTab.value = t
    router.push(t)
}

const removeTab = (t) => {
  let tabs = tabList.value
  let active = activeTab.value
  if(active == t){
    tabs.forEach((tab,index) => {
      if(tab.path == t){
        const nextTab = tabs[index+1] || tabs[index-1]
        if(nextTab){
          active = nextTab.path
        }else{
          active = "/"
        }
      }
    })
  }

  // 修改当前页
  activeTab.value = active
  router.push(active)
  // 剔除所关闭标签
  tabList.value = tabList.value.filter(tab=>tab.path != t)

  // 更新cookie
  cookie.set("tabList",tabList.value)
}

const handleClose = (c) => {
  // 关闭所有
  if(c == "clearAll"){
    // 剔除所有标签
    tabList.value = []
    router.push("/")
  } else if(c == "clearOther"){
    // 关闭其他
    //过滤只剩下当前页
    tabList.value = tabList.value.filter(tab=>tab.path == activeTab.value)
  }
  // 更新cookie
  cookie.set("tabList",tabList.value)
}
</script>
<style scoped>
.f-tag-list {
    @apply fixed bg-gray-200 flex items-center justify-center px-2;
    top:64px;
    right: 0;
    height: 44px;
    z-index: 100;
}
.tag-btn{
    @apply bg-white rounded ml-auto flex items-center justify-center px-2;
    height: 32px;
}
:deep(.el-tabs__header){
    border: 0!important;
    @apply mb-0 mt-2;
}
:deep(.el-tabs__nav){
    border: 0!important;
}
:deep(.el-tabs__item){
    border: 0!important;
    height: 32px;
    line-height: 32px;
    @apply bg-white mx-2 rounded flex;
}
:deep(.el-tabs__nav-next),:deep(.el-tabs__nav-prev){
    line-height: 32px;
    height: 32px;
}
:deep(.is-disabled){
    cursor: not-allowed;
    @apply text-gray-200;
}
</style>